<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, max-scale=1, min-scale=1, viewport-fit=cover">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Qkids久趣英语</title>
  <script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/rem.js"></script>
  <link href="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/css/clocks.css?v={{config('app.version')}}" rel="stylesheet" type="text/css">
  <script type="text/javascript">window.CDN_RESOURCE = "{{env('CDN_RESOURCE')}}"</script>
</head>
<body>
<div class="container">
  <div class="card-1" style="display: none;">
    <div class="avatar">
      <img src="" style="visibility: hidden;" onerror="this.style.visibility='hidden'"
           onload="this.style.visibility='visible'">
    </div>
    <div class="nickname"></div>
    <div class="title">
      正在进行<span class="day"></span>的挑战
    </div>
    <div class="split-line-1"></div>
    <div class="banner" date-text="">
      <img src="" style="visibility: hidden;" onerror="this.style.visibility='hidden'"
           onload="this.style.visibility='visible'">
    </div>
    <div class="description"></div>
    <div class="progress">
      <div class="day">
        <div class="progress-title">已挑战天数</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div><div class="dot">
        <span></span>
        <span></span>
        <span></span>
      </div><div class="lesson">
        <div class="progress-title">已打卡课程</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div><div class="dot">
        <span></span>
        <span></span>
        <span></span>
      </div><div class="exercise">
        <div class="progress-title">已完成练习</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div>
    </div>
    <div class="split-line-2"></div>
    <a class="share-qrcode" href="javascript:void(0);">
      <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/img/share_qrcode3.png">
    </a>
  </div>
  <div class="card-2" style="display: none;">
    <div class="avatar">
      <img src="" style="visibility: hidden;" onerror="this.style.visibility='hidden'"
           onload="this.style.visibility='visible'">
    </div>
    <div class="nickname"></div>
    <div class="title">
      正在进行<span class="day"></span>的挑战<br/>
      <span style="font-size: 0.14rem;">学习到<span class="desc"></span></span>
    </div>
    <div class="progress">
      <div class="day">
        <div class="progress-title">已挑战天数</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div><div class="dot">
        <span></span>
        <span></span>
        <span></span>
      </div><div class="lesson">
        <div class="progress-title">已打卡课程</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div><div class="dot">
        <span></span>
        <span></span>
        <span></span>
      </div><div class="exercise">
        <div class="progress-title">已完成练习</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div>
    </div>
    <div class="split-line-1"></div>
    <a class="share-qrcode" href="javascript:void(0);">
      <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/img/share_qrcode4.png">
    </a>
  </div>
  <a class="share-link" href="javascript:void(0);" style="display: none;">
    <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/img/share_link.png">
  </a>
</div>
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="https://static-app.97kid.com/wx/js/zepto.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/Zepto_fx_methods.js?v={{config('app.version')}}"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/Zepto_touch.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/moment.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/underscore.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/login.js?v={{config('app.version')}}"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/wx_config.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/AV.analytics.js"></script>
<script>
  (function () {
    var rem = window.rem || 0;
    if (utils.getQueryString('_c') === 'achievement_qrcode2') $('.card-2').show()
    else $('.card-1').show()
    if (utils.isWeChat() && utils.isIOS() && history.length > 1) $('.card-1').css('bottom', '0.1rem')
    var qrcodeHeight = $('.card-1').height() - (30 * rem + $('.nickname').outerHeight(true) + $('.title').outerHeight(true) + $('.split-line-1').outerHeight(true) + $('.banner').outerHeight(true) + $('.description').outerHeight(true) + $('.progress').outerHeight(true) + $('.split-line-2').outerHeight(true))
    $('.card-1 .share-qrcode').css('margin', ((qrcodeHeight - 85 * rem) / 200) + 'rem auto')
    var analytics = AV.analytics({
      appId: 'antYy9lOFi5mkU9QKjtYmRLM-gzGzoHsz',
      appKey: 'jqyWxLyobpsmdwsJddJlDheb'
    })
    analytics.send({
      event: 'clock-share-open',
      attr: {
        clockId: "{{$clockId}}",
        channel: utils.getQueryString('_c') || 'share-qrcode'
      }
    })
    var account = new Account({
      closeBtn: false,
      forceLogin: false
    })
    $('.share-link').click(function () {
      analytics.send({
        event: 'clock-share-link',
        attr: {
          clockId: "{{$clockId}}"
        }
      })
      window.location.href = '/wx'
    })
    $('.share-qrcode').on('longTap', function (e) {
      e.preventDefault();
      analytics.send({
        event: 'clock-share-qrcode',
        attr: {
          clockId: "{{$clockId}}"
        }
      })
      return;
    })

    init()

    function init () {
      account.ajax({
        auth: false,
        type: 'GET',
        path: '/s/achievements/friend/clocks/' + '{{$clockId}}',
        success: function (data) {
          var achievement = data.achievement, lesson = data.lesson,
            days = moment(achievement.targetFinishTime * 1000).diff(moment(achievement.startTime * 1000), 'days'),
            weeks = moment(achievement.targetFinishTime * 1000).diff(moment(achievement.startTime * 1000), 'weeks')
          $('.progress > .day > .count').text(achievement.startDays)
          $('.progress > .lesson > .count').text(achievement.clockInCount)
          $('.progress > .exercise > .count').text(achievement.finishedTestCount)
          $('.day > .progress-bar-bg > .progress-bar').css('width', (achievement.startDays * 100 / days) + '%')
          $('.lesson > .progress-bar-bg > .progress-bar').css('width', (achievement.clockInCount * 100 / achievement.targetLessonCount) + '%')
          $('.exercise > .progress-bar-bg > .progress-bar').css('width', '100%')
          $('.banner').attr('date-text', lesson.course.name + '-' + lesson.name)
          $('.title .desc').text(lesson.course.name.replace('L', 'Level') + ' ' + lesson.name + '课')
          $('.banner > img').attr('src', lesson.logoHDUri)
          $('.title .day').text('「' + weeks + '周上' + achievement.targetLessonCount + '节课」')
          $('.description').html('<span>Goal</span> : ' + lesson.description)

          account.ajax({
            auth: false,
            type: 'GET',
            path: '/s/students/socials',
            data: {
              ids: data.studentId,
              type: 1
            },
            success: function (result) {
              $('.nickname').text(result[0].nickname)
              if (result[0].avatar) $('.avatar > img').attr('src', result[0].avatar)
            },
            error: function (err) {
              $.toastAlert(err.message, 2)
            }
          })
        },
        error: function (err) {
          $.toastAlert(err.message, 2)
        }
      })
    }
  })()
</script>
</body>
</html>